<template>
    <div class="shili-radio">
    	<!--
        	作者：497894863@qq.com
        	时间：2018-11-19
        	描述：实例规格 radio
        -->
      
		  <el-radio-group v-model="selected" size="mini" @change="radioChange">
	      <el-radio 
	      	v-for="item in data"
	      	:label="item.index" 
	      	:key="item.index"
	      	border>
	      	{{item.label}}
	      </el-radio>
	    </el-radio-group>
		  
    </div>
</template>

<script>
	import {getAcDictByGroupNames} from "@/service/swagger/AcDictController";
	export default {
		props : [
			"defaultValue"
		],
		data() {
      return {
        data : [],
        selected: 0,
      };
    },
    mounted(){
    	this.initData();
    },
    watch:{
    	defaultValue(n){
    		this.setDefaultValue();
    	},
    },
   	methods:{
   		setDefaultValue(){
   			let index = this.data.length-1 ;
   			if(this.defaultValue&&this.data&&this.data.length){
   				this.data.forEach((el,k)=>{
   					if(el.sourceData&&el.sourceData.value==this.defaultValue){
   						index = k;
   					}
   				})
   			}
   			if(index == -1){
   				index = 0
   			}
   			console.log(123456,this.defaultValue,this.data,index)
   			this.selected = index ;
   		},
   		initData(){
   			getAcDictByGroupNames({
   				groupNames: ["docker_spec"]
   			}).then(ret=>{
   				if(!ret.code){
   					let arr = [];
   					ret.data.forEach((el,index)=>{
   						arr.push({
   							label: el.name,
   							index: index,
   							sourceData: el ,
   						})
   					})
   					arr.push({
   						label: "无限制",
 							index: arr.length,
   					})
   					this.data = arr;
   					this.setDefaultValue();
   				}
   			})
   		},
   		radioChange(index){
   			const value = this.data[index].sourceData ;
   			this.$emit("change","shiliGuigeRadio",value);
   		},
   	}
	}
</script>

<style lang="scss">
	@import "../../../styles/variables.scss";
	
	.shili-radio {
		margin:0 -5px;
		
		.el-radio {
			margin:0 5px 10px 5px !important;
		}
	}
</style>

